<template>
	<view class="section-bar">
		<view class="left">{{title}}</view>
		<view class="center">
			<slot name='center'></slot>
		</view>
		<view class="right">
			<slot name='right'></slot>
		</view>
	</view>
</template>

<script setup>
	defineProps({
		title: {
			type: String,
			default: '标题'
		}
	})
</script>

<style lang="scss">
	.section-bar {
		display: flex;
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 20rpx;

		.left {
			width: 200rpx;
			font-weight: 700;
			font-size: 32rpx;
		}

		.center {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			color: $text-color;
		}

		.right {
			width: 200rpx;
			text-align: right;
			font-size: 28rpx;
			color: $text-color;
		}
	}
</style>